前端的主力-HTML, JavaScript與CSS-7

第 11 屆 iThome 鐵人賽

DAY 16

Modern Web

網站前端後端與API系列第 16 篇

11th鐵人賽

BigQ

2019-10-02 22:48:52

2034 瀏覽

分享至

動手做快樂多 -> JS加法機

這篇跟大家分享JS基礎、經典的用法，必須先從上一篇了解JS操作DOM的方式，才不會卡死死喔！

在我們原本的index.ejs中，找到這段落，修改如下(如果找不到，重新新增一段也可以)

    <div class="inside">
      <h3>我們又新增了第二個class inside的div</h3>
      <!-- 把原本的<p>內容改掉，增加id -->
   	  <p id="addResult">numberAdd成果會在這喔</p>
   	  <!-- 加法按鈕 -->
   	  <button type="button" onclick="numberAdd()"> +1按鈕</button>
    </div>

我們做了兩個動作，把原本<p>的內容改為<p id="addResult">numberAdd成果會在這喔</p>，下方新增一個按鈕<button type="button" onclick="numberAdd()"> +1按鈕</button>
聰明的你，一定知道我們接下來要針對新的DOM標籤屬性id=addResult還有numberAdd()動手腳。

變數var

我們在<script>裡面，新增一個變數(variance)，用法是var=變數內容

  <script>
  	var n = 0;
  </script>

js世界裡面，等號不為我們數學中熟悉的等於，而是賦予物件屬性或值的時候使用，上面的例子，就是宣告js世界，在這個檔案裡，n就是0，以分號作為斷句。
我們新增一個function，叫做numberAdd

  <script>
  	var n = 0;
    function numberAdd(){
  	  n = n+1
  	  document.getElementById("addResult").innerHTML = n
  	  return
  	}
  </script>

這裡有一個重要的觀念，var宣告在function外面(如上)，全域可以用這個經過宣告的n，若在function內，就只有function能夠使用這個n。讀者可以自行試試看。

我們新增的function是numberAdd()，作用是讓每次點擊DOM按鈕後，數值都會+1呈現在畫面上。
nummberAdd()的內容很單純，當執行函式後，首先執行的第一行為

n = n+1

就像剛剛講的，這行將外頭已經宣告過的n拿進來numberAdd()裡面使用，n的值=0。
而這行在說的就是，我們把 n 賦予值為 n+1，也就是說 n 變成了 0+1
所以n為多少？

n為1

下一行不用解釋了，就是將n的值丟到DOM標籤中有id="addResult"的地方
再下一行的return是function函數的斷句，若有需要執行完函數把新的值帶出去更新結果，會使用returen後面加上某個值，就會更新function呼叫後的結果，但我們這邊先不使用回傳值，單純使用ruturn作為function結尾。

存檔，開啟伺服器與網頁，我們將按鈕按下，每次點下去都會+1喔！

按了按鈕幾下後：

附上完整程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <!-- 導入js文件 -->
    <!-- <script type='text/javascript' src='script.js'></script> -->
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <div>
    <!-- 新增在<div>的內容 -->
   	  <h2>鐵人30天 h2代表heading標題樣式2</h2>
   	  <p>p代表段落文字 paragraph of text</p>
  	  <!-- 以下新增第二個<div> -->
  	  <!-- 新增一個id="onlyID" -->
   	  <div class="inside" id="onlyId">
   		<h3>鐵人30天 h3是更小一點的大標題</h3>
   		<p>p一樣是代表文字喔！</p>
   		<!-- 新增一個網頁按鈕 -->
   		<button type="button" onclick="myJSFunction()"> 網頁按鈕</button>
      </div>
      <!-- 再新增一個inside -->
      <div class="inside" >
   		<h3>我們又新增了一個class inside的div</h3>
   		<p>p一樣是代表文字喔！</p>
      </div>
      <!-- 增加<a>的超連結  -->
      <a href="https://ithelp.ithome.com.tw/articles/10222155">30天挑戰文章超連結</a>
    </div>

    <!-- 再新增第二個inside在這 -->
    <div class="inside">
      <h3>我們又新增了第二個class inside的div</h3>
      <!-- 把原本的<p>內容改掉，增加id -->
   	  <p id="addResult">numberAdd成果會在這喔</p>
   	  <!-- 加法按鈕 -->
   	  <button type="button" onclick="numberAdd()"> +1按鈕</button>

    </div>
  </body>
  <!-- 新增一個JS語言撰寫區 -->
  <script>
  	// JS內容寫在這 
  	// alert('還沒30天我已經學會了HTML與CSS啦！')
  	function myJSFunction(){
  		document.getElementById("onlyId").innerHTML = "<h2>按下按鈕替換id='onlyId'後的內容</h2>"
  	}

  	var n = 0;
  	function numberAdd(){
  	  n = n+1
  	  document.getElementById("addResult").innerHTML = n
  	  return
  	}


  </script>
</html>